<template>
  <div>
    <ul>
      <li v-for="item in $props.dataSource" :key="item.__id__">
        {{ item }}
      </li>
    </ul>
    <!-- <Table></Table> -->
    {{ columns }}

    <div style="display: none">
      <slot name="default"> </slot>
    </div>

    <!-- @vue-ignore -->
    <Table
      :columns="tableColumns"
      :data-source="$props.dataSource"
      bordered
    >
      <!-- 操作栏 -->
      <template #bodyCell="{ column, text, record }">
        <!-- <template v-if="column.dataIndex === 'name'"> -->
        <!-- 字段 -->
        <!-- </template> -->

        <template v-if="column.dataIndex === 'operation'">
          <slot name="options"> </slot>
        </template>
        <template v-else> 123 </template>
      </template>
    </Table>
  </div>
</template>

<script setup lang="ts">
import { computed, provide, ref, useSlots } from 'vue';
import { TableExpandInjectKey } from '../../utils';
import type { Column, Columns } from '../../types';
import {
  props,
  context,
  columns,
  formatColumn,
  // tableColumns,
} from './table-expand';

import { Table } from 'ant-design-vue';

const $props = defineProps(props);
// const  $emits = defineEmits(emits)

const tableColumns = computed(() => {
  const format = columns.value.map((col) => formatColumn(col));
  format.push({
    title: '操作',
    dataIndex: 'operation',
    width: '1',
  });
  return format;
});

const slots = useSlots();
const defaultSlot = slots.default?.();
console.log('🚀 ~ defaultSlot:', defaultSlot);

provide(TableExpandInjectKey, context);
</script>

<style scoped></style>
